<template>
	<view class="">
		<navbar :isHome="true"></navbar>
		<swiper class="swiper" autoplay="true"  :interval="3000" circular="true">
			<swiper-item v-for="(item,index) in bannerArr" :key="item.id" class="swiper-item" :data-index="index">
				<view class="swiper-item uni-bg-red">
					<image :src="item.avatar_url" mode="widthFix"></image>
				</view>
			</swiper-item>

		</swiper>
		<!-- 快捷入口 -->
		<view class="nav2-list">
			<view class="" v-for="(item,index) in nav2s" :key="item.id" :data-index="index" @click="navjoin">
				<view class="nav2-item">
					<view class="nav2-pic">
						<image :src="item.pic_image_url" mode="widthFix"></image>
					</view>
				</view>

			</view>
		</view>

		<view class="">
			<view class="" v-for="(item,index) in navs" :key="item.id" :data-index="index" @click="navtop">
				<view class="nav-item">
					<view class="nav-pic">
						<image :src="item.pic_image_url" mode=""></image>
					</view>
					<view class="nav-text">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="weui-cell hosp-list">
			<view class="weui-cell weui-cell_access hosp-item" v-for="(item,index) in hosptailsArr" @click="hosptailsjump"
				:data-hid="item.id" :key="item.id">

				<view class="nav-cell_hd">
					<image :src="item.avatar?item.avatar_url:'../../statis/resource/imgages/avatar.jpg'"
						mode="aspectFill"></image>
				</view>

				<view class="nav-cell_bd">
					<view class="">
						<text class="hosp-name">
							{{item.name}}
						</text>
					</view>

					<view class="hosp-line">
						<text class="hosp-rank">
							{{item.rank}}
						</text>
						<text class="hosp-label">
							{{item.label}}
						</text>
					</view>
					<view class="hosp-line">
						<text class="hosp-intro">
							{{item.intro}}
						</text>
					</view>
				</view>


			</view>

		</view>


	</view>
</template>

<script setup>
	import {
		ref,
		onBeforeMount,
		toRaw
	} from 'vue';
	import request from "/common/utils/request.js"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	onBeforeMount(() => {
		setHight()
	})
	const statusBarHeight = ref(0)
	const systemHight = ref(0)
	const codeData = ref('')
	const bannerArr = ref([])
	const ssid = ref('')
	//快捷入口2
	const nav2s = ref([])
	//快捷入口3
	const navs = ref([])
	//医院列表
	const hosptailsArr = ref([])
	const setHight = () => {
		//设备信息	
		let res = uni.getSystemInfoSync()
		statusBarHeight.value = res.statusBarHeight * 2
		//设备适配
		if (!res.system.indexOf("iOS") > -1) {
			systemHight.value = 96
		} else {
			systemHight.value = 88
		}
	}

	//
	const navjoin = (e) => {

		const nav = toRaw(nav2s.value)[e.currentTarget.dataset.index]
		jumptop(nav, 'nav2s')
	}
	//金刚区
	const navtop = (e) => {
		const nav = toRaw(navs.value)[e.currentTarget.dataset.index]
		jumptop(nav, 'navs')
	}

	const jumptop = (nav, type) => {
		if (nav.stype == 1) {
			uni.navigateTo({
				url: nav.stype_link
			})

		}
	}
	const hosptailsjump = (e) => {
			
			console.log(e,"----------------------------");
			uni.navigateTo({
				url:'/pages/hospital/index?hid='+e.currentTarget.dataset.hid
			})
	}
	const app = getApp()
	onLoad(() => {

		uni.login({
			success(res) {
				codeData.value = res
				
			}
		})

		request.request('/auth/wxLogin', 'GET', {
			code: codeData.code
		}).then(res => {
		
			ssid.value = res.data.sessionid

		})
		//轮播
		request.request('/app/init', 'GET', {}).then(res => {
			const {
				id
			} = res.data.area.id

			request.request('/Index/index', {
				aid: id
			}).then(res => {
				// console.log(res.data.hospitals);
				bannerArr.value = res.data.hospitals
				nav2s.value = res.data.nav2s
				navs.value = res.data.navs
				hosptailsArr.value = res.data.hospitals
				console.log(nav2s);

			})
		})



	})
</script>

<style lang="scss" scoped>
	.text_nav {
		margin-top: 50px;
	}

	.swiper {
		margin-top: 116px;
		padding: 0 20rpx;
	}

	.swiper-item {
		width: 100%;

		overflow: hidden;
		border-radius: 10rpx;

		image {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
	}

	.nav2-list {
		margin: 10rpx 20rpx 0 20rpx;
	}

	.nav2-list::after {
		content: '';
		display: block;
		height: 0;
		line-height: 0;
		clear: both;
		visibility: hidden;
	}

	.nav2-item {
		float: left;
		margin-top: 20rpx;
		width: 50%;
		text-align: center;
		box-sizing: border-box;
		padding: 0 5rpx;
	}

	.nav2-pic {
		width: 100%;
	}

	.nav2-pic image {
		display: block;
		width: 100%;
	}

	.nav-list::after {
		content: '';
		display: block;
		height: 0;
		line-height: 0;
		clear: both;
		visibility: hidden;
	}

	.nav-item {
		float: left;
		margin-top: 20rpx;
		width: 20%;
		text-align: center;
		padding: 10rpx 0;
	}

	.nav-pic image {
		display: block;
		margin: 0 auto;
		width: 110rpx;
		height: 110rpx;
	}

	.nav-text {
		font-size: 24rpx;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
	}

	.hosp-list {
		// display: flex;
		margin: 10rpx 0 0 0;
		background: none;
	}

	.hosp-list::before {
		display: none;
	}

	.hosp-list::after {
		display: none;
	}

	.hosp-item {
		display: flex;
		-webkit-box-align: stretch;
		-webkit-align-items: stretch;
		align-items: stretch;
		padding: 20rpx;
		margin: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04), 0 1px 6px 0 rgba(0, 0, 0, 0.04);
	}

	.hosp-item::before {
		display: none;
	}

	.hosp-item::after {
		display: none;
	}

	.hosp-name {
		font-weight: bold;
		font-size: 34rpx;
	}

	.hosp-avatar {
		display: block;
		width: 200rpx;
		height: 180rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.hosp-line {
		margin-top: 5rpx;
	}

	.hosp-line text {
		font-size: 26rpx;
	}

	.hosp-rank {
		font-weight: bold;
		color: #0bb585;
		margin-right: 15rpx;
	}

	.hosp-label {
		font-weight: bold;
		color: #0ca7ae;
		margin-right: 15rpx;
	}

	.hosp-intro {
		color: #999999;
	}
	.nav-cell_hd{
		
		image{
			border-radius: 10rpx;
			width: 170rpx;
			height: 170rpx;
		}
	}
	.nav-cell_bd{
			margin-left: 10px;
	}
	

</style>